import React from 'react'
import ReactDOM from 'react-dom'
import {bindEvent, getDom} from '../../service/dom'
import './ModalComponent.css'
const appRoot = getDom('#root')
const modalRoot = getDom('#modal-root')

class ModalComponent extends React.Component {
    constructor(props) {
        super(props)
        this.el = document.createElement('div')
        this.el.className = 'modal modal-slide-in'
    }

    componentDidMount() {
        const mask = document.createElement('div')
        console.log(mask)
        mask.className = 'modal-mask'
        bindEvent(mask, 'click', () => this.props.onClose())
        this.el.appendChild(mask)
        modalRoot.appendChild(this.el)
        modalRoot.appendChild(mask)
    }

    componentWillUnmount() {
        modalRoot.removeChild(this.el)
        const mask = getDom('.modal-mask')
        modalRoot.removeChild(mask)
    }

    render() {
        return ReactDOM.createPortal(
            this.props.children,
            this.el
        )
    }
}

export default ModalComponent
